<template>
  <vxe-modal id="orderDetail" v-model="showDialog" title="详情" :destroy-on-close="true" resize remember fullscreen>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>头信息</span>
        <el-button
          style="float: right"
          type="success"
          icon="el-icon-finished"
          size="mini"
          :disabled="headUpdate"
          title="保存修改"
          @click="onSubmit('form')"
        >保存修改</el-button>
      </div>
      <el-form ref="form" :rules="form_rules" size="mini" :model="form" label-position="top">
        <el-row :gutter="10">
          <el-col
            v-for="(item, index) in form_columns"
            :key="item.id"
            :span="item.type == 'radio' || item.type == 'checkbox' ? 24 : 3"
          >
            <el-form-item v-if="item.is_show" :label="item.cn + '：'" :prop="item.en" :label-width="formLabelWidth">
              <el-input
                v-if="item.type == 'input'"
                v-model="form[item.en]"
                :disabled="!item.is_update"
                @input="headUpdate = false"
              />
              <el-input v-if="item.type == 'selector'" v-model="form[item.en+'_show_value']" :readonly="true">
                <template slot="prepend">
                  <el-button style="color:#66B1FF" icon="el-icon-s-grid" @click="selectorShow(item)">{{ form[item.en] }}
                  </el-button>
                </template>
                <template slot="append">
                  <el-button style="color:red" icon="el-icon-circle-close" circle @click="clearSelector(item.en)" />
                </template>
              </el-input>
              <el-input v-if="item.type == 'user'" v-model="form[item.en+'_show_value']" :readonly="true">
                <template slot="prepend">
                  <el-button style="color:#66B1FF" icon="el-icon-s-grid" @click="selectUserShow(item)">
                    {{ form[item.en] }}</el-button>
                </template>
                <template slot="append">
                  <el-button style="color:red" icon="el-icon-circle-close" circle @click="clearSelector(item.en)" />
                </template>
              </el-input>
              <el-select
                v-if="item.type == 'select'"
                v-model="form[item.en]"
                :disabled="!item.is_update"
                filterable
                placeholder="请选择"
                @change="headUpdate = false"
              >
                <el-option
                  v-for="selectItem in form_selectDatas[item.en]"
                  :key="selectItem.id"
                  :label="selectItem.label"
                  :value="selectItem.value"
                />
              </el-select>
              <el-radio-group v-if="item.type == 'radio'" v-model="form[item.en]">
                <el-radio
                  v-for="selectItem in form_selectDatas[item.en]"
                  :key="selectItem.id"
                  :disabled="!item.is_update"
                  :label="selectItem.value"
                  @input="headUpdate = false"
                >
                  {{ selectItem.label }}
                </el-radio>
              </el-radio-group>
              <el-switch
                v-if="item.type == 'switch'"
                v-model="form[item.en]"
                active-color="#13ce66"
                :disabled="!item.is_update"
                inactive-color="#ff4949"
                @input="headUpdate = false"
              />
              <el-date-picker
                v-if="item.type == 'date'"
                v-model="form[item.en]"
                type="date"
                value-format="yyyy-MM-dd"
                style="width: 100%;"
                :disabled="!item.is_update"
                placeholder="选择日期"
                @input="headUpdate = false"
              />
              <el-date-picker
                v-if="item.type == 'datetime'"
                v-model="form[item.en]"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%;"
                :disabled="!item.is_update"
                placeholder="选择日期"
                @input="headUpdate = false"
              />
              <el-button v-if="item.type=='file'" @click="fileShow(item)">查看</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top: 5px;">
      <div slot="header" class="clearfix"><span>行信息</span></div>
      <RayTable
        ref="table"
        :menu="menu"
        :data_object_no="menu.son_data_object_no"
        :height="500"
        :precondition="precondition"
      />
    </el-card>
    <Selector ref="selectorDialog" @confirm="selectorConfirm" />
    <File ref="fileList" @fileModify="fileModify" />
  </vxe-modal>
</template>

<script>
import Selector from './selector.vue'
import File from '@/views/template/components/file.vue'
import RayTable from '@/views/template/components/rayTable.vue'
import { edit_ } from '@/api/template/index'

export default {
  components: {
    File,
    Selector,
    RayTable
  },
  props: ['params', 'showdialog'],
  data() {
    return {
      menu: {},
      form_columns: [],
      form_selectDatas: null,
      form_rules: null,
      form: {},
      fileItem: '',
      precondition: {},
      data_object: {},
      formLabelWidth: '120px',
      headUpdate: false,
      fileList: [],
      dialogTitle: '新增',
      options: [],
      list: [],
      limit: 0,
      loading: false,
      showDialog: false,
      selectorItem: {},
      selectRow: [],
      confirmStatu: false,
      confirmText: '确  定'
    }
  },
  methods: {
    show(menu, form, columns, selectDatas, rules, data_object) {
      this.showDialog = true
      this.menu = menu
      this.form = form
      var newColumns = []
      for (var i = 0; i < columns.length; i++) {
        if (columns[i].type !== 'switch' && columns[i].type !== 'file') {
          newColumns.push(columns[i])
        }
      }
      for (var i = 0; i < columns.length; i++) {
        if (columns[i].type === 'switch' || columns[i].type === 'file') {
          newColumns.push(columns[i])
        }
      }
      this.form_columns = newColumns
      this.form_selectDatas = selectDatas
      this.form_rules = rules
      this.data_object = data_object
      this.precondition[this.menu.son_id_field] = form[this.menu.parent_id_field]
    },
    save() {

    },
    fieldChange(code) {
      eval(code)
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          edit_({
            row: this.form,
            data_object_no: this.data_object.no,
            type: 'dialog',
            interceptorConfirm: this.interceptorConfirm
          })
            .then(res => {
              if (res.type === 'confirm') {
                this.$confirm(res.msg, '提示', {
                  confirmButtonText: res.confirmButton,
                  cancelButtonText: res.cancelButton,
                  type: 'warning'
                }).then(() => {
                  this.interceptorConfirm = true
                  this.onSubmit('form')
                })
              } else {
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
                // Object.assign(this.$parent.select_row, res.updateData)
              }
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    selectorShow(item) {
      this.$refs.selectorDialog.show(item, 2, this.headrow, this.form)
    },
    selectorConfirm({ item, rows }) {
      const selectRow = rows
      this.selectRow = selectRow
      var en = ''
      var en_show_value = ''
      for (var i = 0; i < selectRow.length; i++) {
        en += selectRow[i][JSON.parse(item.type_config).key] + ','
        en_show_value += selectRow[i][JSON.parse(item.type_config).value] + ','
      }
      this.$set(this.form, item.en, en.substring(0, en.length - 1))
      this.$set(this.form, item.en + '_show_value', en_show_value.substring(0, en_show_value.length - 1))
      this.fieldChange(item.on_change)
    },
    clearSelector(en) {
      this.$delete(this.form, en)
      this.$delete(this.form, en + '_show_value')
    },
    selectUserShow(item) {
      var config = JSON.parse(item.type_config)
      if (this.form[item.en] != null) {
        config.select_userids = this.form[item.en].split(',')
      }
      this.$UserSelector.show(config).then(res => {
        var userids = ''
        var usernames = ''
        for (var i = 0; i < res.length; i++) {
          userids += res[i].userid + ','
          usernames += res[i].username + ','
        }
        this.$set(this.form, item.en, userids.substring(0, userids.length - 1))
        this.$set(this.form, item.en + '_show_value', usernames.substring(0, usernames.length - 1))
      })
    },
    fileShow(item) {
      var file_edit = true
      if (item.update_validate != null) {
        var auth = JSON.parse(item.update_validate)
        for (var j = 0; j < auth.length; j++) {
          for (const key in this.row) {
            if (key === auth[j].field) {
              var aaa = this.row[key] + auth[j].operator + auth[j].value
              if (!eval(aaa)) {
                file_edit = false
              }
            }
          }
        }
      }
      this.fileItem = item
      this.$refs.fileList.show({
        ids: this.form[item.en],
        title: item.cn + '列表',
        accpetTypes: item.type_config.split('|')[2],
        limit: item.type_config.split('|')[1],
        folder: item.type_config.split('|')[0],
        file_edit: !!(item.is_line_update && this.data_object.is_line_update)
      })
    },
    fileModify(fileIds) {
      this.form[this.fileItem.en] = fileIds
    },
    close() {
      this.showDialog = false
    }
  }
}
</script>
<style scoped>
  .vxe-modal--wrapper.type--modal .vxe-modal--body,
  .vxe-modal--wrapper.type--modal .vxe-modal--body .vxe-modal--content {
    padding: 5px;
  }

  .el-card__header {
    padding: 10px;
  }

  .el-card__header {
    background-color: lightgray;
  }
</style>
